<template>
  <div class="radiocheckbox">
    <!-- 单选框 -->
    <el-row>
      <el-radio v-model="sex" label="1">男</el-radio>
      <el-radio v-model="sex" label="2">女</el-radio>
    </el-row>

    <el-row>
      <el-radio-group v-model="city">
        <el-radio :label="1">深圳</el-radio>
        <el-radio :label="2">广州</el-radio>
        <el-radio :label="3" border>北京</el-radio><!-- border：添加边框 -->
        <el-radio :label="4" disabled>上海</el-radio><!-- disabled:禁用 -->
      </el-radio-group>
    </el-row>

    <!-- 复选框 -->
    <el-row>
      <el-checkbox v-model="checked1">选项1</el-checkbox>
      <el-checkbox v-model="checked2">选项2</el-checkbox>
    </el-row>

    <el-row>
      <el-checkbox-group v-model="checkList" :max="2"> <!-- :max，最大只能勾选几个 -->
        <el-checkbox label="音乐">音乐</el-checkbox>
        <el-checkbox label="电影">电影</el-checkbox>
        <el-checkbox label="游戏">游戏</el-checkbox>
        <el-checkbox label="运动">运动</el-checkbox>
      </el-checkbox-group>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "RadioCheckbox",

    data() {
      return{
        sex: '1',
        city: 1 ,
        checkList: ['电影','运动']
      }
    }
  }
</script>

<style scope>
.el-row{
  margin:20px 0;
}

</style>